<template>
  <div>
    <el-dialog
      title="提示"
      :visible="seatReservation"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >请输入想要预约的位置<br />x-yyzz，x表示楼层，yy相加表示行，zz相加表示列。yy和zz的取值范围为0-f<br />例：3-1a9f表示3楼10行24列座位处
        <el-input
          v-model="seatReservationInput"
          placeholder="座位位置"
        ></el-input>
        <div class="block">
          <span class="demonstration">选择时间</span>
          <el-date-picker
            v-model="day"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00']"
          >
          </el-date-picker>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1" id="mark1" @click="pushIndex"
        >个人图书管理</el-menu-item
      >
      <el-menu-item index="2" @click="seatReservation = true"
        >座位预约</el-menu-item
      >
      <!-- <el-menu-item index="3" @click="pushBookList">我的书单</el-menu-item> -->
      <el-submenu index="2">
        <template slot="title">个人信息</template>
        <el-menu-item index="2-1" @click="myComment">我的评论</el-menu-item>
        <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
      </el-submenu>
      <!-- <el-menu-item index="5"
        ><div class="search_box">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
              <el-input
                v-model="formInline.nameOrId"
                placeholder="搜索"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div></el-menu-item
      > -->
      <el-menu-item index="4" @click="pushToSearch"
        >搜索书籍</el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      day: "",
      activeIndex: "1",
      seatReservation: false,
      seatReservationInput: "",
      formInline: {
        nameOrId: ""
      }
    };
  },
  mounted: function() {
    this.activeIndex = this.$route.params.activeIndex;
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose() {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.seatReservation = false;
        })
        .catch(_ => {});
    },
    onSubmit() {
      console.log(this.formInline.nameOrId);
      var userInsert = this.formInline.nameOrId;

      this.$axios({
        method: "get",
        url: "api",
        data: this.qs.stringify({
          //这里是发送给后台的数据
          keywords: userInsert
        })
      })
        .then(response => {
          //这里使用了ES6的语法
          console.log(response); //请求成功返回的数据
          //跳转页面
          this.$router.push({
            name: "bookinfo",
            params: { bid: this.nameOrId }
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    cancel() {
      this.seatReservation = false;
      document.getElementById("mark1").click();
      console.log(this.activeIndex);
    },
    confirm() {
      var token = localStorage.getItem("localStorage");
      this.$axios({
        //座位预约的URL
        method: "get",
        url: "http://127.0.0.1:8000/borrow/",
        data: {
          //这里是发送给后台的数据
          token: token,
          seat: this.seatReservationInput
        }
      })
        .then(response => {
          //设置结果
          var data = response.data;
        })
        .catch(error => {
          //如果token过期则重新获取token
          this.$axios({
            method: "get",
            url: "http://127.0.0.1:8000/token/refresh/",
            data: {
              //这里是发送给后台的数据
              token: token
            }
          })
            .then(response => {
              var data = response.data;
              localStorage.setItem("token", JSON.stringify(data.data.token));
            })
            .catch(error => {});
        });
      this.seatReservation = false;
      document.getElementById("mark1").click();
    },
    pushIndex() {
      console.log("准备跳转");
      this.$router.push({ name: "index", params: { activeIndex: "1" } });
    },
    pushBookList() {
      console.log("准备跳转");
      this.$router.push({ name: "bookList", params: { activeIndex: "3" } });
    },
    pushToSearch(){
      this.$router.push({ name: "search", params: { activeIndex: "4" } });
    },
    myComment() {
      this.$router.push({ name: "myComment" });
    },
    logout() {
      localStorage.removeItem("token");
      this.$router.push({ name: "login" });
    }
  }
};
</script>

<style>
.search_box {
  padding-top: 2%;
}
.block {
  margin-top: 2%;
}
</style>
